.hc-top-up { background-image: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,0)); border-color: rgba(255, 255, 255, .4);padding-bottom:10px; transition: .5s; }
.hc-top-nd { background: rgba(255, 255, 255, .8); border: none; box-shadow: 0px 0px 5px #888888; transition: .5s; }
.p1100 { display: none; }
.hc-top-up .hc-logobox { display:block; padding:40px 0 30px;text-align: center;transition: .5s;  }
.hc-top-nd .hc-logobox { display:block; float:left;padding:10px 0; transition: .5s; }
#mainNav .hc-logobox img { height: 50px;}
.hc-top-nd .hc-logobox img {padding-left:100px;}
#mainNav .hc-navbox {text-align:center;overflow: hidden;transition: .5s; }
.hc-top-up .hc-navbox {float:none;}
.hc-top-nd .hc-navbox {float:left;height:60px;padding-top:5px;margin-left:100px; }
#mainNav .hc-navbox>li {font-family: Arial;display: inline-block;position:static;float:none;}
#mainNav .hc-navbox>li>a{display: block;height:50px;padding:0;text-align:center;overflow: hidden;position: relative;transition: all 0.5s ease-in-out;}
.hc-top-up .hc-navbox>li>a{width:120px;}
.hc-top-nd .hc-navbox>li>a{width:110px;}
#mainNav .hc-navbox>li>a span{display: block;font-size:18px;height:50px;line-height:50px;text-align: center;z-index: 9999;width:inherit;}
#mainNav .hc-navbox>li>a .en{position: absolute;top: 0px;opacity: 0;transition: all 0.5s ease-in-out;color: #0080cb}
#mainNav .hc-navbox>li>a .cn{position: absolute;top: 0px;opacity: 1;transition: all 0.5s ease-in-out;}
#mainNav .hc-navbox>li:hover a .en { opacity: 1; }
#mainNav .hc-navbox>li:hover a .cn { opacity: 0; }
.hc-top-up .hc-navbox>li>a span{text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);}
.hc-top-up .hc-navbox>li>a .cn,
.hc-top-up .hc-navbox>li>a:hover .cn,
.hc-top-up .hc-navbox>li>a:focus .cn{color: #fff;}
.hc-top-nd .hc-navbox>li>a .cn,
.hc-top-nd .hc-navbox>li>a .cn:hover,
.hc-top-nd .hc-navbox>li>a .cn:focus{color:#666; }
/*=======================================================================================*/
@media only screen and (max-width:1259px) {
	.hc-top-up .hc-logobox {padding:30px 0 20px;  }
	.hc-top-nd .hc-logobox img {padding-left:0;}
	.hc-top-nd .hc-navbox {padding-top:10px; }
	.hc-top-up .hc-navbox>li>a{width:100px;}
	.hc-top-nd .hc-navbox>li>a{width:95px;}
	#mainNav .hc-navbox>li>a {height:40px;}
	#mainNav .hc-navbox>li>a span{display: block;height:40px;line-height:40px;font-size:16px;}
}
@media only screen and (max-width:991px) {
	.hc-top-up{padding-bottom:0;}
	
}
/*=======================================================================================*/
@media only screen and (max-width:991px) {
.p768 { display: none; }
.hc-navbox { width: 100%; position: absolute; top: 0;left:0; background: rgba(255, 255, 255,.9); z-index: -1; margin: 0 ; padding-top: 0px; height: 0; overflow: hidden; opacity: 0; transition: .5s; }
.hc-navbox01 { width: 100%; position: absolute; top: 0;left:0; background: rgba(255, 255, 255,.9); z-index: -1; margin: 0; padding-top:150px; height: 100vh; overflow: hidden; opacity: 1; transition: .5s; }
#mainNav .hc-logobox img { height:40px; }
.p1100{display:block;}	
#navBox li { height: 40px; width: 100%; overflow: hidden; text-align: center; margin: 10px 0; font-size: 1.2em; }
#navBox li:active { background: #fff; }
#navBox li .nav-on { display: none; }
.hc-top-up .hc-logobox { display:inline-block;padding:10px 0; transition: .5s; }
/*C菜单按钮*/
#mainNav .hc-oi { width: 22px; height: 20px;  position: absolute; right:calc((100% - 720px) / 2); top:20px;  }
#mainNav .hc-io { width: 22px; height: 20px; position: absolute; right:calc((100% - 720px) / 2); top:20px;  }
#mainNav .hc-oi em { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: inline-block; width:22px; height: 3px; z-index: 10; }
#mainNav .hc-oi em::before,  #mainNav .hc-oi em::after{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform .3s; -moz-transition: -moz-transform .3s; transition: transform .3s; }
#mainNav .hc-oi em::before { -webkit-transform: translateY(-8px) rotate(0deg); -moz-transform: translateY(-8px) rotate(0deg); -ms-transform: translateY(-8px) rotate(0deg); -o-transform: translateY(-8px) rotate(0deg); transform: translateY(-8px) rotate(0deg); }
#mainNav .hc-oi em::after { -webkit-transform: translateY(8px) rotate(0deg); -moz-transform: translateY(8px) rotate(0deg); -ms-transform: translateY(8px) rotate(0deg); -o-transform: translateY(8px) rotate(0deg); transform: translateY(8px) rotate(0deg); }
#mainNav .hc-io em { background: rgba(53, 53, 53, 0); }
#mainNav .hc-io em::before { -webkit-transform: translateY(0px) rotate(45deg); -moz-transform: translateY(0px) rotate(45deg); -ms-transform: translateY(0px) rotate(45deg); -o-transform: translateY(0px) rotate(45deg); transform: translateY(0px) rotate(45deg); background-color:#333;}
#mainNav .hc-io em::after { -webkit-transform: translateY(0px) rotate(-45deg); -moz-transform: translateY(0px) rotate(-45deg); -ms-transform: translateY(0px) rotate(-45deg); -o-transform: translateY(0px) rotate(-45deg); transform: translateY(0px) rotate(-45deg);background-color:#333;}
#mainNav .hc-navbox01>li>a span.en { display:none; }
#mainNav .hc-navbox01>li:hover a span { color: #0080cb; }
	.hc-top-up .hc-oi em,.hc-top-up .hc-oi em::before,  .hc-top-up .hc-oi em::after{ background-color: #fff;}
	.hc-top-nd .hc-oi em,.hc-top-nd .hc-oi em::before,  .hc-top-nd .hc-oi em::after{ background-color: #333;}
}
@media only screen and (max-width:767px) {
#mainNav .hc-oi { right:20px;  }
#mainNav .hc-io { right:20px;  }
}